<template>
  <VueDraggableResizable
    :minWidth="10"
    :minHeight="10"
    :w="props.config.location.width"
    :h="props.config.location.height"
    :x="props.config.location.x"
    :y="props.config.location.y"
    :active="
      config.currentIndex === props.id ||
      config.checkedList.indexOf(props.id) !== -1
    "
    :parent="true"
    :scale="config.canvasConfig.scale"
    @activated="activated"
    :onResizeStart="onResizeStart"
    :onResize="onResize"
    :onDrag="onDrag"
    :onDragStart="onDragStart"
    @dragging="dragging"
    @dragstop="dragstop"
    @resizing="resizing"
    @resizestop="resizestop"
    @contextmenu="contextMenuHandle"
  >
    <div
      style="
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 999;
        cursor: move;
        color: red;
      "
    >
    </div>
    <component
      :is="props.config.render"
      :config="currentConfig"
      :location="props.config.location"
      :id="props.id"
    ></component>
  </VueDraggableResizable>
</template>
<script lang="ts" setup>
import { defineProps, watch, ref, defineEmits, inject } from "vue";
import VueDraggableResizable from "../VueDraggableResizable/index.vue";
import { useConfig } from "@/stores/datav/useConfig";
import { IConfig, IConfigStore } from "@/stores/datav/types";
import {
  IDrapResize,
  useDragResize,
} from "@/components/viewEditor/GroupComponent/hooks/drapResize";
import { merge } from "@/utils/meger";
const emits = defineEmits(["context-menu-handle"]);
const config: IConfigStore = useConfig();
const props = defineProps<{ config: IConfig; id: string }>();
const pubsub = inject("pubsub");
let currentConfig = ref(
  merge(config.config[props.id].option, config.config[props.id].data)
);
watch(
  () => props.config.data,
  (nv) => {
    currentConfig.value = merge(props.config.option, nv);
  },
  {
    deep: true,
  }
);
watch(
  () => props.config.option,
  (nv) => {
    currentConfig.value = merge(nv, props.config.data);
  },
  {
    deep: true,
  }
);

/**
 * 拖拽以及修改大小的所有事件
 */
const {
  activated,
  onResizeStart,
  onResize,
  resizing,
  resizestop,
  onDragStart,
  onDrag,
  dragging,
  dragstop,
  contextMenuHandle,
}: IDrapResize = useDragResize(props, emits, pubsub);
</script>

<style scoped></style>
